<template>
  <div class="admin-body">
    <div class="admin-body-head">
      <admin-head></admin-head>
    </div>
    <div class="admin-body-center">
      <div class="admin-left" :class="fixleft ? 'fix-left' : ''">
        <admin-menu @gorouter="gorouter"></admin-menu>
      </div>
      <div class="right-router-view" :class="fixleft ? 'mar-left' : ''">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import AdminHead from "./childcomps/AdminHead.vue";
import AdminMenu from "./childcomps/AdminMenu.vue";
import { getorder } from "network/request.js";
import { ElNotification } from "element-plus";
export default {
  components: {
    AdminHead,
    AdminMenu,

    // AdminBody
  },
  data() {
    return {
      fixleft: false,
      backnum: 0,
    };
  },
  methods: {
    gorouter() {
      this.$router.push("/admin/usermessage");
    },
    fixmenu() {
      let that = this;
      //获取滚动距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      //当滚动距离大于900 右部菜单固定
      if (scrollTop > 100) {
        this.fixleft = true;
      } else {
        this.fixleft = false;
      }
    },
  },
  created() {
    getorder().then(({ data: res }) => {
      // console.log(res)
      res.forEach((item) => {
        if (item.staus == "退款中") {
          this.backnum++;
        }
      });
      if (this.backnum > 0) {
        ElNotification({
          title: "Refund",
          message: "有" + this.backnum + "个订单发起退款~",
          type: "info",
        });
      }
    });
  },
  mounted() {
    window.addEventListener("scroll", this.fixmenu, true);
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: rgb(230, 230, 230);
}
.admin-body {
  width: 100%;
  height: 100vh;
}
.admin-body-head {
  width: 100%;
  background-color: rgba(0, 150, 136, 0.78);
}
.admin-body-center {
  display: flex;
  justify-content: space-between;
}
.admin-left {
  /* position: fixed; */
  height: 100vh;
  width: 15%;
  background-color: white;
}
.fix-left {
  position: fixed;
  top: 0;
}
.mar-left {
  margin-left: 15%;
}
.right-router-view {
  width: 85%;
  /* margin-left: 15%; */
  /* height: 100vh; */
}
</style>